<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <title>Facelet Title</title>
</h:head>
<h:body>
    <ui:composition template="UserCenterGeneral.xhtml">
        <ui:define name="ucontent">
            <h:outputScript name="chinese_locale.js" library="js"/>
            <h:panelGrid columns="1">
                <h:outputText value="－用户信息修改－" styleClass="mark"></h:outputText>
            </h:panelGrid>
            <p:separator></p:separator>

            <div style="border:1px solid #cccccc;">
                <p:wizard backLabel="上一步" nextLabel="下一步">
                    <p:tab title="基本信息">
                        <p:panel style="border:1px solid #cccccc;">
                            <h:panelGrid columns="2" styleClass="generalInfo">
                                <h:outputText value="姓名："></h:outputText>
                                <h:inputText value="#{userDetail.usr.name}"></h:inputText>
                                <h:outputText value="性别："></h:outputText>

                                <h:selectOneMenu value="#{userDetail.usr.gender}">
                                    <f:selectItem itemLabel="男" itemValue="男"/>
                                    <f:selectItem itemLabel="女" itemValue="女"/>
                                </h:selectOneMenu>


                                <h:outputText value="现居地："></h:outputText>
                                <h:panelGroup>
                                    <h:selectOneMenu value="#{userDetail.province}">
                                        <f:ajax execute="@all" event="change"
                                                listener="#{userDetail.loadCities}" render="city"></f:ajax>
                                        <f:selectItems value="#{userDetail.provs}"/>
                                    </h:selectOneMenu>
                                    <h:selectOneMenu id="city" value="#{userDetail.city}">
                                        <f:selectItems value="#{userDetail.citys}"/>
                                    </h:selectOneMenu>
                                </h:panelGroup>
                                <h:outputText value="生日："></h:outputText>
                                <p:calendar value="#{userDetail.usr.birthDay}" pattern="yyyy-MM-dd" locale="zh_CN"
                                            showButtonPanel="true" navigator="true" timeZone="GMT+8"
                                            yearRange="c-100:c"/>


                            </h:panelGrid>
                        </p:panel>
                    </p:tab>

                    <p:tab title="个人头像">
                        <p:panel style="border:1px solid #cccccc;">
                            <h:panelGrid columns="3" style="" styleClass="generalInfo">
                                <h:outputText value="个人头像："></h:outputText>
                                <p:graphicImage id="picss"
                                                value="#{userDetail.usr.picUrl==''?'/resources/images/user_model.gif':userDetail.usr.picUrl}"
                                                style="width:120px;height:120px;"/>

                                <p:fileUpload id="upl" fileUploadListener="#{userDetail.up_action}" update="picss"
                                              uploadLabel="上传" auto="true" label="选择头像图片"
                                              allowTypes="/(\.|\/)(gif|jpe?g|png)$/">
                                </p:fileUpload>

                            </h:panelGrid>
                        </p:panel>
                    </p:tab>

                    <p:tab title="联系方式">
                        <p:panel style="border:1px solid #cccccc;">
                            <h:panelGrid columns="2" style="" styleClass="generalInfo">
                                <h:outputText value="电话："></h:outputText>
                                <h:inputText value="#{userDetail.usr.tel}"></h:inputText>
                                <h:outputText value="E-Mail："></h:outputText>
                                <h:inputText value="#{userDetail.usr.email}" disabled="true"></h:inputText>
                                <h:outputText value="QQ："></h:outputText>
                                <h:inputText value="#{userDetail.usr.qq}"></h:inputText>
                                <h:outputText value="详细地址："></h:outputText>
                                <h:inputText value="#{userDetail.usr.address}"></h:inputText>

                            </h:panelGrid>
                        </p:panel>
                    </p:tab>

                    <p:tab title="密码修改">

                        <p:panel style="border:1px solid #cccccc;">
                            <h:outputText value="不修改密码请留空！" style="color:red;font-size: 12px;"/>
                            <h:panelGrid columns="2" style="" styleClass="generalInfo">
                                <h:outputText value="原密码："></h:outputText>
                                <h:inputSecret value="#{userDetail.pwd_temp}"></h:inputSecret>

                                <h:outputText value="新密码："></h:outputText>
                                <h:inputSecret value="#{userDetail.pwd_n1}"></h:inputSecret>

                                <h:outputText value="新密码确认："></h:outputText>
                                <h:inputSecret value="#{userDetail.pwd_n2}"></h:inputSecret>

                                <p:commandButton action="#{userDetail.saveUserChange}"
                                                 value="提交修改"></p:commandButton>
                            </h:panelGrid>
                        </p:panel>
                    </p:tab>


                </p:wizard>
            </div>

            <p:outputPanel autoUpdate="true">
                <p:growl/>
            </p:outputPanel>
        </ui:define>
    </ui:composition>
</h:body>
</html>

